<template>
  <div class="system-content">
    <div class="flex-box">
      <el-table
        v-loading="loading"
        id="depTable"
        :data="tableData"
        :height="tableHeight">
<!--        <el-table-column-->
<!--          v-if="tableUpdateAuth"-->
<!--          type="selection"-->
<!--          width="55"/>-->
        <el-table-column
          prop="realname"
          show-overflow-tooltip
          label="姓名">
          <template slot-scope="scope">
            <div class="status-name">
              <div :style="{'background-color' : getStatusColor(scope.row.status)}"/>
              {{ scope.row.realname }}
            </div>
          </template>
          <template
            slot="header"
            slot-scope="scope">
            <div class="table-head-name" :title="scope.column.label">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.field"
          :label="item.value"
          :formatter="tableFormatter"
          show-overflow-tooltip>
          <template
            slot="header"
            slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
          <template
            slot-scope="scope">
            <div v-if="scope.column.property === 'QuitDept'" :title="scope.row.QuitDept" class="table-head-name">{{ scope.row.QuitDept ? scope.row.QuitDept : '--' }}</div>
            <div v-else :title="scope.row[item.field]" class="table-head-name">{{ scope.row[item.field] }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

<script>
import { getQuitUsers } from '@/api/common'
export default {
  name: 'employeeLeave',
  data() {
    return {
      loading: false,
      tableData: [],
      tableHeight: document.documentElement.clientHeight - 248, // 表的高度
      /** 分页逻辑 */
      structureValue: '', // 左侧列表选中的值 用于筛选
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 45, 60],
      total: 0,
      /** ** */
      fieldList: [
        { field: 'QuitDept', value: '所属部门' },
        { field: 'updateTime', value: '离职日期' }
      ]
    }
  },
  mounted() {
    this.getEmployeeLeaveList()
  },
  methods: {
    getEmployeeLeaveList() {
      this.loading = true
      getQuitUsers({
        page: this.currentPage,
        limit: this.pageSize
      })
        .then(res => {
          this.loading = false
          this.tableData = res.data.list
          this.total = res.data.totalRow
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取状态颜色 0 禁用 1 启用 2未激活
    getStatusColor(status) {
      if (status == 0) {
        return '#FF6767'
      } else if (status == 1) {
        return '#46CDCF'
      } else if (status == 2) {
        return '#CCCCCC'
      }
    },
    // 列表信息格式化
    tableFormatter(row, column) {
      if (column.property == 'sex') {
        return { 1: '男', 2: '女' }[row.sex]
      }
      return row[column.property]
    },
    // 更改每页展示数量
    handleSizeChange(val) {
      this.pageSize = val
      this.getEmployeeLeaveList()
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.currentPage = val
      this.getEmployeeLeaveList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .system-content {
    position: relative;
    height: 100%;
    flex: 1;
    display: flex;
    overflow: hidden;
    /*background-color: #FFFFFF;*/
    border: 1px solid #e6e6e6;
  }
  /* 设置占位 */
  .flex-box {
    flex: 1;
    /*border-bottom: 1px solid #e6e6e6;*/
  }
  /* 搜索框 */
  .icon-search {
    width: 280px;
    position: relative;
  }
  .new-dialog-form /deep/ .el-select {
    display: block;
  }
  /*分页布局*/
  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  .status-des {
    font-size: 12px;
    color: #777777;
    margin: 0 5px;
    position: absolute;
    left: 0;
    top: 7px;
    .status-des-item {
      margin: 8px;
      display: inline-block;
      div {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        margin-right: 5px;
      }
    }
  }
  .status-name {
    div {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
    }
    color: $xr-color-primary;
    cursor: pointer;
  }
</style>
